<template>
  <div class="container pt-4">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="form.jobDesc"
          name="jobDesc"
          label="个人简历"
          placeholder="请填写个人简历"
          type="textarea"
          maxlength="500"
          show-word-limit
		  />
          <!-- required
          :rules="[{ required: true, message: '请填写个人简历' }]" -->
        <van-field
          v-model="form.policeHonor"
          name="policeHonor"
          label="从警荣誉"
          placeholder="请输入从警荣誉"
          type="textarea"
          maxlength="500"
          show-word-limit
        >
        </van-field>
        <van-field
          v-model="form.policeOath"
          name="policeOath"
          label="从警誓言"
          placeholder="请输入从警誓言"
          type="textarea"
          maxlength="500"
          show-word-limit
          required
          :rules="[{ required: true, message: '请输入从警誓言' }]"
        />
        <van-field
          v-model="form.policeStory"
          name="policeStory"
          maxlength="500"
          show-word-limit
          label="从警故事"
          type="textarea"
          placeholder="请输入个人从警故事"
        />
        <van-field
          v-model="form.hobby"
          name="hobby"
          label="兴趣爱好"
          type="textarea"
          maxlength="500"
          show-word-limit
          placeholder="请输入兴趣爱好"
        />
      </van-cell-group>
      <div class="flex w-1/2 mx-auto my-4">
        <van-button
          round
          block
          type="primary"
          style="margin-right: 16px"
          @click="router.go(-1)"
          :loading="loading"
        >
          上一步
        </van-button>
        <van-button round block type="primary" native-type="submit">
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { useUserInfo } from "@/store";
const router = useRouter();
const form = reactive<Record<string, any>>({}),
  loading = ref(false);
const onSubmit = () => {
  useUserInfo().setUserInfo(form);
  router.push("/picture");
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f9f9f9;
  height: 100%;
}
</style>
